{% extends 'base.jinja2' %}

{% block css %}
  {% if not user_email %}
    {% assets filters="scss", output="css/gen/login.css", "css/scss/login.scss" %}
      <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
    {% endassets %}
  {% endif %}
  {% assets filters="scss", output="css/gen/app.css", "css/scss/app.scss" %}
    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
  {% endassets %}
{% endblock %}

{% block content %}
  <div id="app"
    class=
       "{%- if online -%} online {%- else -%} offline {%- endif %}
      {%- if serialLogActive %} serial-log {%- endif %}
      {%- if user_email %} user-logged {%- else %} no-user {%- endif %}
      off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="tab-bar">
        <section class="left-small">
          <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
        </section>
        <section class="middle tab-bar-section">
          <span class="top-logo-small show-for-small"><a href="#"><i class="icon-rocket"></i></a></span>
          <h1 class="title hide-for-small"><a href="#"><img src="/static/img/{% if mfDefinition.variant.logo -%} variant/{{mfDefinition.variant.logo}} {%- else -%} astrobox_logo_medium.png {%- endif %}"/></a></h1>
          <div id="connection-view">
            <a href="#settings/internet-connection" class="offline" data-title="Not connected to the internet">
              <img src="/img/no-internet-icon.png" />
            </a>
            <i class="icon-rocket astroprint"></i>
            <i class="icon-3d-printer printer"></i>
            <i class="icon-exchange server"></i>
          </div>
          <ul class="right show-for-large-up"><li><a class="launch-ap" href="#">My AstroPrint Cloud</a></li></ul>
        </section>
        <section class="right-small">
          <a class="turn-off" title="Device Shutdown"><i class="icon-off"></i></a>
        </section>
      </nav>
      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list" id="main-menu">
          <li class="header bold"><label>{{astroboxName}}</label></li>
          {% if not user_email %}
            <li><a class="button small login" data-reveal-id="login-modal"><i class="icon-user"></i> Sign in to AstroPrint</a></li>
          {% endif %}
          <li><a href="#"><i class="icon-th"></i> Dashboard</a></li>
          {% if mfDefinition.links.supplies %}
            <li><a href="{{mfDefinition.links.supplies}}"><i class="icon-basket"></i> Supplies</a></li>
          {% endif %}
          <li><a href="{{mfDefinition.links.support}}"><i class="icon-lifebuoy"></i> Help</a></li>
          {% if user_email %}
            <li><label class="account bold"><i class="icon-user"></i> {{user_email}}</label></li>
            <li><a class="launch-ap" href="#"><i class="icon-rocket"></i> AstroPrint Cloud</a></li>
            <li class="logout"><a href="#"><i class="icon-logout"></i> Sign out <i class="icon-rocket-spinner animate-spin hide"></i></a></li>
          {% endif %}
        </ul>
        <div class="turn-off-area row">
          <div class="small-6 columns">
            <button class="alert tiny radius turn-off"><i class="icon-off"></i><br/>Shutdown</button>
          </div>
          <div class="small-6 columns">
            <button class="secondary tiny radius reboot"><i class="icon-refresh"></i> Restart</button>
          </div>
        </div>
        <div class="copy" align="center">Powered by <a href="https://www.astroprint.com">AstroPrint&reg;</a><br/>{{version}}</div>
      </aside>
      <div id="main">
        <div class="row">
          <div id="view-container" class="small-12 columns">
            <div id="home-view" class="app-view hide"> {%- include 'home.jinja2' -%} </div>
            <div id="files-view" class="app-view hide"> {%- include 'files.jinja2' -%} </div>
            <div id="print-queue-view" class="app-view hide"> {%- include 'print-queue.jinja2' -%} </div>
            <div id="utilities-view" class="app-view hide"> {%- include 'utilities.jinja2' -%} </div>
            <div id="settings-view" class="app-view hide"> {%- include 'settings.jinja2' -%} </div>
            <div id="printing-view" class="app-view hide"> {%- include 'printing.jinja2' -%} </div>
            <div id="terminal-view" class="app-view hide"> {%- include 'terminal.jinja2' -%} </div>
            <div id="camera-view" class="app-view hide"> {%- include 'camera.jinja2' -%} </div>
            <div id="supplies-view" class="app-view hide"> {%- include 'supplies.jinja2' -%} </div>
            {% if mfDefinition.variant.additional_custom_tasks %}
              <div id="additional-tasks-view" class="app-view hide"> {%- include 'additional-tasks.jinja2' -%} </div>
            {% endif %}
            <div id="additional-task-view" class="app-view hide"> {%- include 'additional-task.jinja2' -%} </div>
            <div id="maintenance-menu-view" class="app-view hide"> {%- include 'maintenance-menu.jinja2' -%} </div>
            <div id="help-view" class="app-view hide"> {%- include 'help.jinja2' -%} </div>
          </div>
        </div>
      </div>
      <div class="row quick-nav">
        <div class="small-12 large-6 small-centered columns">
          <ul class="small-block-grid-5 columns text-center">
            <li class="dash"><a href="#" title="Dashboard"><i class="icon-th"></i></a></li>
            <li class="files"><a href="#files" title="File Manager"><i class="icon-folder"></i></a></li>
            <li class="utilities"><a href="#utilities" title="Control Panel"><i class="icon-move"></i></a></li>
            <li class="camera"><a href="#camera" title="Camera"><i class="icon-videocam-1"></i></a></li>
            <li class="settings"><a href="#settings" title="Settings"><i class="icon-cog"></i></a></li>
          </ul>
        </div>
      </div>
      <a class="exit-off-canvas"></a>
    </div>
  </div>

  {% if show_bad_shutdown %}
    <div id="bad-shutdown-modal" class="reveal-modal medium" data-reveal>
      <h2 class="bold">Improper Shutdown</h2>
      <div class="modal-content">
        <div class="warning-outline">
          <h1 align="center"><i class="icon-attention"></i></h1>
          <h4 class="bold">Your device was not properly shutdown</h4>
          <p class="alert">
            Cutting the power without first doing an ordely shutdown can <b>damage</b> your filesystem and <b>cause problems</b> to your device.
          </p>
          <hr/>
          <p>
            <b>Next time:</b><br/>
            Select <b><i class="icon-off"></i></b> in the <b>top-right corner</b> and wait a few seconds before cutting the power.
          </p>
        </div>
        <center><button class="secondary radius" onclick="$('#bad-shutdown-modal').foundation('reveal', 'close')">Ok, Got it</button></center>
      </div>
      <a class="close-reveal-modal">&#215;</a>
    </div>
  {% endif %}

  <div id="semicircle-view" class="app-view hide"> {%- include 'widget.jinja2' -%} </div>


  {%- if not user_email -%} {% include 'login.jinja2' %} {%- endif -%}

  <div id="turnoff-view" class="app-view hide" data-fullscreen="1"> {%- include 'turnoff.jinja2' -%} </div>
  <div id="reboot-view" class="app-view hide" data-fullscreen="1"> {%- include 'reboot.jinja2' -%} </div>
  <div id="unreachable-view" class="app-view hide" data-fullscreen="1"> {%- include 'unreachable.jinja2' -%} </div>
{% endblock %}

{% block js %}
  <script type="text/javascript">
    var UI_API_KEY = "{{ uiApiKey }}";
    var BASEURL = "{{ url_for('index') }}";
    var API_BASEURL = BASEURL + "api/";
    var SOCKJS_URI = window.location.protocol.slice(0, -1) + "://" + (window.document ? window.document.domain : window.location.hostname) + ":" + window.location.port + "/sockjs";
    var SOCKJS_DEBUG = {% if debug -%} true {%- else -%} false {%- endif %};
    var LOGGED_USER = {% if user_email -%} "{{user_email}}" {%- else -%} null {%- endif %};
    var LOGGED_PUBLIC_KEY = {% if userPublicKey -%} "{{userPublicKey}}" {%- else -%} null {%- endif %};
    var app = null;
    var ASTROBOX_NAME = "{{astroboxName}}";
    var PRODUCT_NAME = "{{mfDefinition.variant.product_name}}";
    var CAMERA_MANAGER = "{{cameraManager}}";
    var AP_API_HOST = "{{apApiHost}}";
    var AP_API_CLIENT_ID = "{{apApiClientId}}";
    var BOX_ID = "{{boxId}}";
    var WS_TOKEN = "{{ wsToken }}";
    var initial_states = {
      printing: {% if printing -%} true {%- else -%} false {%- endif %},
      paused: {% if paused -%} true {%- else -%} false {%- endif %},
      print_capture: {% if print_capture -%} {{ print_capture | tojson | safe }} {%- else -%} null {%- endif %},
      online: {% if online -%} true {%- else -%} false {%- endif %},
      checkSoftware: {% if checkSoftware -%} true {%- else -%} false {%- endif %},
      additionalTasks: {% if additionalTasks -%} true {%- else -%} false {%- endif %},
      userLogged: {% if user_email -%} true {%- else -%} false {%- endif %}
    };
    var initial_printer_profile = {{ printer_profile | tojson | safe }};
  </script>
  {% assets filters="closure_js", output="js/gen/app.js",
    "js/lib/jquery.js", "js/lib/jquery.ui.widget.js", "js/lib/underscore.js", "js/lib/backbone.js", "js/lib/modernizr.js",
    "js/lib/foundation/foundation.js", "js/lib/foundation/foundation.offcanvas.js", "js/lib/foundation/foundation.reveal.js",
    "js/lib/foundation/foundation.abide.js", "js/lib/foundation/foundation.equalizer.js","js/lib/foundation/foundation.dropdown.js","js/lib/foundation/foundation.tooltip.js",
    "js/lib/sockjs.js", "js/lib/fastclick.js", "js/lib/jquery.fileupload.js", "js/lib/jquery.noty.js",
    "js/lib/jquery.noty.top.js", "js/lib/circle-progress.js", "js/app/utils.js", "js/app/astroprint-api.js",
    "js/lib/spin.min.js", "js/lib/jquery.localtime.min.js",
    "js/app/models/socketdata.js", "js/app/models/printfiles.js", "js/app/models/usbfiles.js", "js/app/models/printerprofile.js","js/app/models/additionaltask.js","js/app/models/maintenancemenu.js",
    "js/app/widgets/tempsemicircleview.js", "js/app/widgets/semicircleprogress.js", "js/app/widgets/uploader.js", "js/app/widgets/camera-control.js","js/app/widgets/control-movement.js", "js/app/widgets/gcode-terminal.js",
    "js/app/views/home.js", "js/app/views/files.js", "js/app/views/print-queue.js", "js/app/views/utilities.js", "js/app/views/settings.js", "js/app/views/connection.js",
    "js/app/views/turnoff.js", "js/app/views/reboot.js", "js/app/views/printing.js", "js/app/views/terminal.js", "js/app/views/camera.js", "js/app/views/unreachable.js", "js/app/views/supplies.js", "js/app/views/help.js",
    "js/app/router.js","js/app/views/additional-tasks.js","js/app/views/additional-task.js","js/app/views/maintenance-menu.js",
    "js/app/app.js" -%}
      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
  {%- endassets %}
  {% if not user_email %}
    {% assets filters="closure_js", output="js/gen/login.js", "js/lib/foundation/foundation.abide.js", "js/app/login.js" -%}
      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {%- endassets %}
  {% endif %}
  <script type="text/javascript">
    $(document).foundation({
      offcanvas: { close_on_click: true },
      abide: {
        patterns: {
          hostname: /^[A-Za-z0-9\-]+$/,
          colorCode : /^((0x){0,1}|#{0,1})([0-9A-Fa-f]{8}|[0-9A-Fa-f]{6})$/
        }
      }
    });

    {% if show_bad_shutdown %}
      $('#bad-shutdown-modal').foundation('reveal', 'open');
    {% endif %}
  </script>
{% endblock %}
